<template>
  <view class="main-view">
    <view class="top-view">
      <eui-card hPadding="10">
        <eui-text :value="getName('rdsStores', mainData.c_store_id)" type="name2" title="机构" cWidth="width: 100%" />
        <eui-text :value="getName('rdsDeparts', mainData.c_adno)" type="name2" title="部门" cWidth="width: 100%" />
        <eui-text :value="getName('rdsWnos', mainData.c_wno)" type="name2" title="仓库" cWidth="width: 100%" />
        <eui-text :value="getDictName('损溢性质', mainData.c_pal_kind)" type="name2" title="损溢性质" />
        <view class="line-view" />
        <eui-text :value="mainData.c_n_l" type="price2" :precision="3" title="总数量(报损)" :valueStyle="showRightStyle" cWidth="width: 100%" />
        <eui-text :value="mainData.c_at_sale_l" type="price2" title="售价额(报损)" :valueStyle="showRightStyle" cWidth="width: 100%" />
        <eui-text :value="mainData.c_at_cost_l" type="price2" title="成本额(报损)" :valueStyle="showRightStyle" cWidth="width: 100%" />
        <eui-text :value="mainData.c_aet_cost_l" type="price2" title="不含税成本额(报损)" :valueStyle="showRightStyle" cWidth="width: 100%" />
        <view class="line-view" />
        <eui-text :value="mainData.c_n_p" type="price2" :precision="3" title="总数量(报溢)" :valueStyle="showRightStyle" cWidth="width: 100%" />
        <eui-text :value="mainData.c_at_sale_p" type="price2" title="售价额(报溢)" :valueStyle="showRightStyle" cWidth="width: 100%" />
        <eui-text :value="mainData.c_at_cost_p" type="price2" title="成本额(报溢)" :valueStyle="showRightStyle" cWidth="width: 100%" />
        <eui-text :value="mainData.c_aet_cost_p" type="price2" title="不含税成本额(报溢)" :valueStyle="showRightStyle" cWidth="width: 100%" />
      </eui-card>
    </view>
    <view class="footer-view" :style="{ height: listHeight + 'rpx' }">
      <eui-paging ref="paging" v-model="listManager" :fixed="false" :refresher-enabled="false"
                  :default-page-size="10" :loading-more-enabled="true" :show-loading-more-when-reload="true">
        <view v-for="(item, index) in listManager" :key="index" class="item-view">
          <eui-text :value="index + 1 + '. [' + item.c_gcode + ']' + item.c_gname" type="name2"
                    title="" cWidth="width: 100%" />
          <eui-text :value="item.c_barcode" type="name2" title="条码" :valueStyle="valueStyle" />
          <eui-text :value="item.c_pal_flag_mname" type="name2" title="损溢方向" :valueStyle="valueStyle" />
          <eui-text :value="item.c_adno_mname" type="name2" title="部门" :valueStyle="valueStyle" />
          <eui-text :value="item.c_ccode_mname" type="name2" title="品类" :valueStyle="valueStyle" />
          <eui-text :value="item.c_d_type_mname" type="name2" title="物流模式" :valueStyle="valueStyle" />
          <eui-text :value="item.c_pack" :name="item.c_unit" type="slash2" title="含量/单位" :valueStyle="valueStyle" />
          <eui-text :value="item.c_pt_cost" type="price2" :precision="4" title="成本价" :valueStyle="showRightStyle" />
          <eui-text :value="item.c_price" type="price2" title="售价" :valueStyle="showRightStyle" />
          <eui-text :value="item.c_tax_rate" type="price2" :precision="0" title="税率(%)" :valueStyle="showRightStyle" />
          <eui-text :value="item.c_at_sale" type="price2" title="售价额" :valueStyle="showRightStyle" />
          <eui-text :value="item.c_at_cost" type="price2" title="成本金额" :valueStyle="showRightStyle" />
          <eui-text :value="item.c_aet_cost" type="price2" title="不含税成本额" :valueStyle="showRightStyle" />
          <eui-text :value="item.c_n_pack" type="price2" :precision="0" title="件数" :valueStyle="showRightStyle" />
          <eui-text :value="item.c_n_odd" type="price2" :precision="3" title="零数" :valueStyle="showRightStyle" />
          <eui-text :value="item.c_n" type="price2" :precision="3" title="数量" :valueStyle="showRightStyle" />
          <eui-text :value="item.c_reason" type="name2" title="原因" occupy cWidth="width: 100%" />
        </view>
      </eui-paging>
    </view>
  </view>
</template>

<script setup type="ts">
import { ref, reactive, onMounted, defineProps } from 'vue';
import {useMainStore} from "@/store/modules/store";
import {useLoginStore} from "@/store/modules/useLoginStore";
import { getRdsUrl, rdsRequest } from '@/hooks/rdsServices';
import service from "@/common/service";
const mainStore = useMainStore();
const LoginStore = useLoginStore();
const rdsUrl = getRdsUrl();
const valueStyle = ref('white-space: nowrap;overflow: hidden;text-overflow: ellipsis;')
const showRightStyle = ref('text-align: right');

const title = ref('商品损溢单');
const listHeight = ref(300);
const mainData = ref({});
const listManager = ref([]);
const paging = ref(null);
let rdsDict = reactive([]);
let rdsStoresMap = reactive({}); //机构
let rdsWnosMap = reactive({}); //仓库
let rdsProvidersMap = reactive({}); //供应商
let rdsDepartsMap = reactive({}); //部门
let rdsGdsclassesMap = reactive({}); //品类

const props = defineProps({
  data: {
    type: Object
  },
  windowWidth: {
    type: Number,
    default: 0,
  }
});

onMounted (async () => {
  await getAllDicData();
  if (props.data.BillId) {
    await billQuery();
  }
  setTimeout(() => {
    getListHeight();
  },100)
});

// 获取列表高度
const getListHeight = async () => {
  await uni.getSystemInfo({
    success: function (res) { // res - 各种参数
      let info = uni.createSelectorQuery().select(".footer-view");
      info.boundingClientRect(function (data) { //data - 各种参数
        let info2 = uni.createSelectorQuery().select(".user-footer");
        info2.boundingClientRect(function (data2) { //data - 各种参数
          //获取列表高度
          let height = res.windowHeight - data.top - data2.height;
          //转换rpx
          listHeight.value = height / (res.windowWidth / 750) - 20;
        }).exec()
      }).exec()
    }
  });
};

// 获取字典数据
const getAllDicData = async () => {
  rdsDict = await service.getLocalStorage('rdsDict');
  rdsStoresMap = await service.getLocalStorage('rdsStores');
  rdsWnosMap = await service.getLocalStorage('rdsWnos');
  rdsProvidersMap = await service.getLocalStorage('rdsProviders');
  rdsDepartsMap = await service.getLocalStorage('rdsDeparts');
  rdsGdsclassesMap = await service.getLocalStorage('rdsGdsclasses');
}

// 获取单据详情信息
const billQuery = async () => {
  service.enjoyShowLoading("正在加载...")
  const req = {
    BillId: props.data.BillId,
  };
  const result = await rdsRequest(rdsUrl.scApi, '商品损溢单', 'EnjoyBillQuery', req, '751');
  if (result.ds.length > 0) {
    mainData.value = result.ds[0];
    let columnData = result.ds1;
    columnData.forEach(x => {
      x.c_pal_flag_mname = getDictName('损溢方向', x.c_pal_flag);
      x.c_d_type_mname = getDictName('物流模式', x.c_d_type);
      x.c_adno_mname = getName('rdsDeparts', x.c_adno);
      x.c_ccode_mname = getName('rdsGdsclasses', x.c_ccode);
    })
    paging.value.setLocalPaging(columnData);
  } else {
    uni.showToast({
      duration: 2000,
      icon: 'none',
      title: '未查询到数据',
      mask: true,
    });
  }
  service.enjoyHideLoading();
}

const getName = (key, value) => {
  let list = [];
  if (!value) {
    return ''
  }
  value.split(',').map(item => {
    const flag = isEnglishLettersOnly(key)
    if (flag) {
      list.push("[" + item + "]" + getRelatedName(key, item) || '');
    } else {
      list.push("[" + item + "]" + key);
    }
  })
  return list.join(',');
}

const isEnglishLettersOnly = (str) => {
  // 正则表达式，匹配所有的英文字母
  const regex = /^[A-Za-z]+$/;
  return regex.test(str);
}

const getDictName = (key, value) => {
  const dictMap = rdsDict.find(x => x.c_class_name === key && x.c_id === value);
  return dictMap ? dictMap.c_name : ''
}

const getRelatedName = (key, value) => {
  switch (key) {
    case 'rdsStores':
      return rdsStoresMap[value] ? rdsStoresMap[value] : '';
    case 'rdsWnos':
      return rdsWnosMap[value] ? rdsWnosMap[value] : '';
    case 'rdsProviders':
      return rdsProvidersMap[value] ? rdsProvidersMap[value] : '';
    case 'rdsDeparts':
      return rdsDepartsMap[value] ? rdsDepartsMap[value] : '';
    case 'rdsGdsclasses':
      return rdsGdsclassesMap[value] ? rdsGdsclassesMap[value] : '';
    default:
      return ''
  }
}

</script>

<style lang="scss" scoped>
@import '@/static/font/enjoyicon/iconfont.css';
@import '@/main.scss';

.line-view {
  width: 100%;
  height: 1rpx;
  background: $uni-line-color;
  margin: 5rpx 0;
}

.content {
  padding: 0;
  display: flex;
}

.main-view {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.top-view {
  display: flex;
  width: 100%;
  height: auto;
  margin-bottom: 20rpx;
}

.footer-view {
  width: 100%;
  display: flex;
}

.navigation {
  flex: 2;
}

.footer {
  flex: 1;
  width: 100%;
  display: flex;
}

.m-list-top {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  padding: 12rpx 12rpx 0 0;
  border-top: 1px solid #f5f5f5;
  font-size: 24rpx;
}

.table-text {
  font-size: 25rpx;
  margin: 10rpx;
}

.empty-view {
  width: 100%;
  height: 15rpx;
}

.item-view {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  row-gap: 8rpx;
  background: #ffffff;
  padding: 12rpx;
  border-bottom: 1px solid $uni-line-color;
}

</style>
